<script setup>
import { useRoute } from 'uniapp-router-next'
import { onMounted, ref } from 'vue'
const route = useRoute()
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navBarTop = menuButtonInfo.top
const navBarHeight = menuButtonInfo.height
const goBack = () => {
  uni.navigateBack()
}

const registerList = ref()
const girlNum = ref(0)
const boyNum = ref(0)

onMounted(() => {
  const registerListRes = route.query.listRes
  registerList.value = registerListRes.data.list
  registerList.value.forEach((item) => {
    if (item.userDetail.sex == 0) {
      boyNum.value++
    } else if (item.userDetail.sex == 1) {
      girlNum.value++
    }
  })
})
</script>
<template>
  <view class="page">
    <view class="navigate-bar" :style="{ paddingTop: navBarTop + 'px', lineHeight: navBarHeight + 'px' }">
      <img src="../../static/backArrow.png" alt="" class="backArrow" @click="goBack" />
      <h2>报名清单</h2>
    </view>
    <view class="header">
      <view class="item">
        <view>已报名({{ registerList.length }})</view>
        <view class="red"></view>
      </view>
    </view>
    <view class="detail">
      <view class="middle">
        <view class="left"
          ><text>已报：{{ registerList?.length ?? 0 }}人</text></view
        >
        <view
          ><text>男：{{ boyNum ?? 0 }}人</text></view
        >
        <view
          ><text>女：{{ girlNum ?? 0 }} 人</text></view
        >
      </view>
      <view class="container">
        <view class="register">
          <view v-for="(item, index) in registerList" :key="index" class="card">
            <img :src="item?.userDetail.avatar ?? '../../static/noExist.jpg'" alt="" />
            <view class="info">
              <view>
                <p class="name">{{ item?.userDetail.name }}</p>
                <p class="time">{{ item?.userDetail.stu_num }}</p>
              </view>
            </view>
            <text>{{ item.userDetail.sex === 0 ? '男' : item.userDetail.sex === 1 ? '女' : '暂未填写' }}</text>
            <up-icon name="checkmark-circle-fill" color="#cecece" size="28"></up-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped lang="scss">
.page {
  width: 100%;
  height: 100vh;
  background-color: #f1f1f1;
  box-sizing: border-box;
}

.navigate-bar {
  display: flex;
  justify-content: center;
  background-color: #fff;
  font-weight: bold;

  .backArrow {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 1%;
  }

  h2 {
    justify-items: end;
  }
}

.header {
  display: flex;
  padding: 20px 20px 0;
  background-color: #fff;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    font-size: 15px;
    color: #727370;

    .red {
      width: 40px;
      height: 3px;
      margin-top: 13px;
      background-color: red;
      border-radius: 5px;
    }
  }
}

.middle {
  display: flex;
  margin: 5px 10px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 14px;
  font-weight: bold;

  .left {
    flex: 1;
    font-size: 15px;
  }

  view {
    flex: 0.5;
    font-size: 15px;
  }
}

.card {
  height: 40px;
  background-color: #fff;
  padding: 20px;
  margin: 0 10px 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;

  image {
    width: 35px;
    height: 35px;
  }

  .info {
    display: flex;
    flex: 0.4;
    flex-direction: column;
    margin: 0 auto;

    .name {
      font-size: 12px;
      font-weight: bold;
    }

    .time {
      margin-top: 5px;
      font-size: 12px;
      color: #cbcbcb;
    }
  }

  text {
    flex: 0.3;
    font-size: 12px;
    font-weight: bold;
  }

  :deep(.data-v-1c933a9a) {
    flex: 0.2;
  }
}
</style>
